<template>
	<view class="container">
		<view class="stat-cards">
			<view class="stat-card green">
				<view class="card-section">
					<text>商品总量</text>
					<text>{{ stats.total }}</text>
				</view>
				<view class="divider"></view>
				<view class="card-section">
					<text>普通商品 {{ stats.regular }} 件</text>
					<text>服务商品 {{ stats.service }} 件</text>
				</view>
			</view>
			<view class="stat-card blue">
				<view class="card-section">
					<text>库存预警</text>
					<text>{{ stats.lowStock }} 件</text>
				</view>
				<view class="divider"></view>
				<view class="card-section">
					<text>库存不足5件--共 {{ stats.stockBelow5 }} 件</text>
					<text>库存不足10件--共 {{ stats.stockBelow10 }} 件</text>
					<text>库存不足15件--共 {{ stats.stockBelow15 }} 件</text>
				</view>
			</view>
		</view>

		<!-- 搜索和操作按钮区域 -->
		<view class="controls">
			<!-- 搜索框 -->
			<uni-search-bar v-model="searchQuery" placeholder="输入产品名称" class="search-bar"></uni-search-bar>
			<view class="control-buttons">
				<button class="control-button" size="mini" @click="fetchProducts">搜索产品</button>
			</view>

			<!-- 操作按钮 -->
			<view class="control-buttons">
				<button class="control-button" size="mini" @click="openAddPopup">新增产品</button>
			</view>
		</view>

		<!-- 产品列表表格 -->
		<uni-table>
			<uni-tr>
				<uni-th align="center">商品编号</uni-th>
				<uni-th align="center">商品名称</uni-th>
				<uni-th align="center">商品简码</uni-th>
				<uni-th align="center">零售价格</uni-th>
				<uni-th align="center">商品类型</uni-th>
				<uni-th align="center">商品分类</uni-th> <!-- 新增分类列 -->
				<uni-th align="center">会员特价</uni-th>
				<!-- <uni-th align="center">库存数量</uni-th> -->
				<uni-th align="center">单位</uni-th>
				<uni-th align="center">操作</uni-th>
			</uni-tr>

			<!-- 动态生成数据行 -->
			<uni-tr v-for="(product, index) in filteredProducts" :key="index">
				<uni-td align="center">{{ product.product_code }}</uni-td>
				<uni-td align="center">{{ product.product_name }}</uni-td>
				<uni-td align="center">{{ product.short_code }}</uni-td>
				<uni-td align="center">{{ product.retail_price }}</uni-td>
				<uni-td align="center">
					<view v-if="product.product_type == 1">
						普通商品
					</view>
					<view v-else>服务商品</view>
				</uni-td>
				<uni-td align="center">{{ getCategoryName(product.category_id) }}</uni-td> <!-- 显示商品分类名称 -->
				<uni-td align="center">{{ product.member_discount }}</uni-td>
				<!-- <uni-td align="center">{{ product.quantity }}</uni-td> -->
				<uni-td align="center">{{ getUnitName(product.unit)}}</uni-td>
				<uni-td align="center">
					<button class="button" type="primary" @click="openEdit(product)" size="mini">编辑</button>
					<button class="button" type="warn" @click="confirmDelete(product)" size="mini"
						style="margin-left: 5px;">删除</button>
					<!-- <button class="button" type="primary" @click="viewSpecs(product)" size="mini"
						style="margin-left: 5px;">查看规格</button> -->

				</uni-td>
			</uni-tr>
		</uni-table>
		<uni-popup ref="specPopup" type="center">
			<uni-table>

				<uni-th align="center">规格名称</uni-th>
				<uni-th align="center">规格值</uni-th>
				<uni-th align="center">库存数量</uni-th>
				<!-- <uni-th align="center">零售价格</uni-th> -->
				<uni-th align="center">会员特价</uni-th>
				<uni-th align="center">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(spec, index) in specs" :key="index">
					<uni-td align="center">{{ spec.spec_name }}</uni-td>
					<uni-td align="center">{{ spec.spec_value }}</uni-td>
					<uni-td align="center">{{ spec.quantity }}</uni-td>
					<!-- <uni-td align="center">{{ spec.retail_price }}</uni-td> -->
					<uni-td align="center">{{ spec.member_discount }}</uni-td>
					<uni-td align="center">
						<button class="button" type="primary" @click="editSpec(spec)" size="mini">编辑</button>
					</uni-td>
				</uni-tr>
			</uni-table>
		</uni-popup>


		<uni-popup ref="editSpecPopup" type="center">
			<view class="spec-modal">
				<h3>编辑规格</h3>
				<view class="form-row">
					<label>规格名称：</label>
					<input v-model="currentSpec.spec_name" class="input-field" />
				</view>
				<view class="form-row">
					<label>规格值：</label>
					<input v-model="currentSpec.spec_value" class="input-field" />
				</view>
				<view class="form-row">
					<label>库存数量：</label>
					<input v-model="currentSpec.quantity" class="input-field" type="number" />
				</view>
				<!-- <view class="form-row">
					<label>零售价格：</label>
					<input v-model="currentSpec.retail_price" class="input-field" type="number" />
				</view> -->
				<view class="form-row">
					<label>会员特价：</label>
					<input v-model="currentSpec.member_discount" class="input-field" type="number" />
				</view>
				<view class="button-group">
					<uni-button type="primary" size="small" @click="saveSpec">保存</uni-button>
					<uni-button type="default" size="small" @click="closeEditSpecPopup">取消</uni-button>
				</view>
			</view>
		</uni-popup>


		<!-- 分页组件 -->
		<view style="margin-top: 20px;">
			<uni-pagination 
				:current="pagination.currentPage" 
				:total="pagination.totalRecords" 
				:pageSize="pagination.pageSize"
				@change="handlePageChange" 
			/>
		</view>

		<!-- 编辑商品弹窗 -->
		<uni-popup ref="editPopup" type="center">
			<view class="member-modal">
				<h3>编辑商品信息</h3>
				<!-- 表单输入字段 -->
				<view class="form-row">
					<label>商品编号：</label>
					<input v-model="currentProduct.product_code" class="input-field" />
				</view>
				<view class="form-row">
					<label>商品名称：</label>
					<input v-model="currentProduct.product_name" class="input-field"
						@input="generateShortCode(currentProduct)" />
				</view>
				<view class="form-row">
					<label>商品简码：</label>
					<input v-model="currentProduct.short_code" class="input-field" />
				</view>
				<!-- <view class="form-row">
					<label>零售价格：</label>
					<input v-model="currentProduct.retail_price" class="input-field" />
				</view> -->
				<view class="form-row">
					<view class="form-group" style="display: flex;">
						<label>商品类型：</label>
						<radio-group @change="radioChange" class="gender-options">
							<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items"
								:key="item.value">
								<radio :value="item.value" :checked="index === current" />{{ item.name }}
							</label>
						</radio-group>
					</view>
				</view>
				<view class="form-row">
					<label>单位：</label>
					<select v-model="currentProduct.unit" class="input-field">
						<option value="" disabled>请选择单位</option>
						<option v-for="unit in unitPickerList" :key="unit.id" :value="unit.id">{{ unit.name }}</option>
					</select>
				</view>
				<view class="form-row">
					<label>会员特价：</label>
					<input v-model="currentProduct.member_discount" class="input-field" />
				</view>
				<view class="form-row">
					<label>商品分类：</label>
					<picker mode="selector" :range="categoryPickerList" range-key="label"
						v-model="currentProduct.category_id" class="input-field" @change="updateCurrentCategory">
						<view>{{ getCategoryName(currentProduct.category_id) || '请选择分类' }}</view>
					</picker>
				</view>
				<!-- 保存和取消按钮 -->
				<view class="button-group">
					<button class="modal-button save" @click="saveProduct" size="mini">保存</button>
					<button class="modal-button cancel" @click="closePopup" size="mini">取消</button>
				</view>
			</view>
		</uni-popup>

		<!-- 新增产品弹窗 -->
		<uni-popup ref="addPopup" type="center">
			<view class="member-modal">
				<h3>新增商品</h3>
				<!-- 表单输入字段 -->
				<view class="form-row">
					<label>商品编号：</label>
					<input v-model="newProduct.product_code" class="input-field" />
				</view>
				<view class="form-row">
					<label>商品名称：</label>
					<input v-model="newProduct.product_name" class="input-field"
						@input="generateShortCode(newProduct)" />
				</view>
				<view class="form-row">
					<label>商品简码：</label>
					<input v-model="newProduct.short_code" class="input-field" disabled
						style="background-color: lightgray;" />
				</view>
			<!-- 	<view class="form-row">
					<label>零售价格：</label>
					<input v-model="newProduct.retail_price" class="input-field" />
				</view> -->
				<view class="form-row">
					<view class="form-group" style="display: flex;">
						<label>商品类型：</label>
						<radio-group @change="radioChange" class="gender-options">
							<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items"
								:key="item.value">
								<radio :value="item.value" :checked="index === current" />{{ item.name }}
							</label>
						</radio-group>
					</view>
				</view>
				<view class="form-row">
					<label>商品分类：</label>
					<picker mode="selector" :range="categoryPickerList" range-key="label"
						v-model="newProduct.category_id" class="input-field" @change="updateNewCategory">
						<view>{{ getCategoryName(newProduct.category_id) || '请选择分类' }}</view>
					</picker>
				</view>
				<view class="form-row">
					<label>单位：</label>
					<select v-model="newProduct.unit" class="input-field">
						<option value="" disabled>请选择单位</option>
						<option v-for="unit in unitPickerList" :key="unit.id" :value="unit.id">{{ unit.name }}</option>
					</select>
				</view>
				<!-- 保存和取消按钮 -->
				<view class="button-group">
					<button class="modal-button save" @click="addProduct" size="mini">添加</button>
					<button class="modal-button cancel" @click="closePopup" size="mini">取消</button>
				</view>
			</view>
		</uni-popup>


	</view>
</template>

<script>
	import pinyin from 'js-pinyin'; // 导入拼音转换库

	export default {
		data() {
			return {
				products: [], // 商品列表
				filteredProducts: [], // 筛选后的商品列表
				currentProduct: {}, // 当前编辑的商品
				newProduct: { // 新增的商品
					product_code: '',
					product_name: '',
					short_code: '',
					retail_price: '',
					product_type: '',
					member_discount: '',
					offline_cashier: '',
					operator: '',
					category_id: '', // 新增分类字段
					unit_id: '' // 新增单位字段
				},
				categories: [], // 分类列表
				categoryPickerList: [], // 分类选择列表
				units: [], // 单位列表
				unitPickerList: [], // 单位选择列表
				totalPages: 1, // 总页数
				currentPage: 1, // 当前页码
				searchQuery: '', // 搜索关键词
				userInfo: {}, // 用户信息
				mainAccountId: 0, // 主账号ID
				shopId: 0, // 门店ID
				stats: [], // 统计信息
				items: [{
						name: "普通",
						value: "1"
					},
					{
						name: "服务",
						value: "2"
					}
				],
				current: 0,
				currentTransfer: {
					product_code: '',
					from_shop_id: 0,
					to_shop_id: '',
					quantity: 0
				}, // 当前调货信息
				storePickerList: [], // 门店选择列表
				// 其他数据保持不变
				selectedProduct: null, // 选中的产品
				specs: [], // 规格列表
				currentSpec: {
					id: '',
					spec_name: '',
					spec_value: '',
					quantity: 0
				}, // 当前编辑的规格
				pagination: {
				currentPage: 1,
				pageSize: 10,
				totalRecords: 0,
				totalPages: 1
				},
			};
		},
		methods: {


			radioChange(e) {
				this.current = this.items.findIndex(item => item.value === e.detail.value);
			},
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value);
				this.index = e.detail.value;
			},
			bindDateChange(e) {
				this.date = e.detail.value;
			},
			bindTimeChange(e) {
				this.time = e.detail.value;
			},
			updateCurrentCategory(e) {
				this.currentProduct.category_id = this.categoryPickerList[e.detail.value].value;
			},
			updateNewCategory(e) {
				this.newProduct.category_id = this.categoryPickerList[e.detail.value].value;
			},
			updateCurrentUnit(e) {
				this.currentProduct.unit_id = this.unitPickerList[e.detail.value].value;
			},
			updateNewUnit(e) {
				this.newProduct.unit_id = this.unitPickerList[e.detail.value].value;
			},
			updateDestinationStoreId(e) {
				this.currentTransfer.to_shop_id = e.detail.value;
			},
			async fetchCategories() {
				const res = await this.$myRuquest({
					url: '/index/plugin.users/getCategories',
					method: 'GET',
					data: {
						main_account_id: this.mainAccountId,
					}
				});
				if (res.data.code === 200) {
					const categories = [{
						id: '',
						name: '请选择分类'
					}, ...res.data.data];
					this.categoryPickerList = this.flattenCategories(categories);
				} else {
					uni.showToast({
						title: res.data.message,
						duration: 2000,
						icon: 'none'
					});
				}
			},
			flattenCategories(categories) {
				let result = [];
				categories.forEach(category => {
					result.push({
						value: String(category.id),
						label: category.name
					});
					if (category.subcategories && category.subcategories.length > 0) {
						const subcategories = category.subcategories.map(sub => ({
							value: String(sub.id),
							label: '--- ' + sub.name
						}));
						result = result.concat(subcategories);
					}
				});
				return result;
			},
			async fetchUnits() {
				const res = await this.$myRuquest({
					url: '/index/plugin.users/getUnits',
					method: 'GET',
					data: {
						main_account_id: this.mainAccountId,
					}
				});
				if (res.data.code === 200) {
					this.unitPickerList = res.data.data;
				} else {
					uni.showToast({
						title: res.data.message,
						duration: 2000,
						icon: 'none'
					});
				}
			},
			async fetchStores() {
				const res = await this.$myRuquest({
					url: `/index/plugin.users/getStores`,
					method: 'GET',
					data: {
						user_id: this.mainAccountId,
					}
				});
				if (res.data.code === 200) {
					this.stores = res.data.data;
					this.storePickerList = this.stores.map(store => store.name);
				} else {
					uni.showToast({
						title: res.data.message,
						icon: 'none',
						duration: 2000
					});
				}
			},
			getCategoryName(id) {
				const category = this.categoryPickerList.find(cat => cat.value === String(id));
				return category ? category.label : '';
			},
			generateProductId() {
				return Math.random().toString().slice(2, 12);
			},
			getUnitName(unitId) {
				const unit = this.unitPickerList.find(unit => unit.id === parseInt(unitId));
				return unit ? unit.name : '未知单位';
			},
			generateShortCode(product) {
				product.short_code = pinyin.getCamelChars(product.product_name).substring(0, 3).toLowerCase();
			},
			// 获取商品列表
			async fetchProducts() {
				const res = await this.$myRuquest({
					url: '/index/plugin.users/getProducts',
					method: 'GET',
					data: {
					searchTerm: this.searchQuery,
					main_account_id: this.userInfo.user_id,
					shop_id: this.shopId,
					page: this.pagination.currentPage,
					pageSize: this.pagination.pageSize
					}
				});
				if (res.data.code === 200) {
					this.products = res.data.data;
					this.filteredProducts = [...this.products];
					// 确保分页数据存在
					if (res.data.pagination) {
					this.pagination = {
						...this.pagination,
						currentPage: res.data.pagination.currentPage || this.pagination.currentPage,
						totalRecords: res.data.pagination.totalRecords || this.pagination.totalRecords,
						totalPages: res.data.pagination.totalPages || this.pagination.totalPages,
						pageSize: res.data.pagination.pageSize || this.pagination.pageSize
					};
					}
				} else {
					uni.showToast({
					title: res.data.message,
					duration: 2000,
					icon: 'none'
					});
				}
			},

			// 打开编辑弹窗
			openEdit(product) {
				this.currentProduct = {
					...product
				};
				this.$refs.editPopup.open();
			},

			// 打开新增弹窗
			openAddPopup() {
				this.newProduct = {
					product_code: this.generateProductId(), // 生成随机商品编号
					product_name: '',
					short_code: '',
					retail_price: '',
					product_type: '',
					member_discount: '',
					operator: '',
					category_id: '', // 新增分类字段
					unit_id: '' // 新增单位字段
				};
				this.$refs.addPopup.open();
			},

			// 关闭弹窗
			closePopup() {
				this.$refs.editPopup.close();
				this.$refs.addPopup.close();
				// this.$refs.transferPopup.close();

			},

			// 查看规格
			async viewSpecs(product) {
				this.selectedProduct = product;
				const res = await this.$myRuquest({
					url: '/index/plugin.users/getSpecs',
					method: 'GET',
					data: {
						product_id: product.id,
					}
				});
				if (res.data.code === 200) {
					this.specs = res.data.data;
					this.$refs.specPopup.open();
				} else {
					uni.showToast({
						title: res.data.message,
						duration: 2000,
						icon: 'none'
					});
				}
			},
			closeSpecPopup() {
				this.$refs.specPopup.close();
			},
			editSpec(spec) {
				this.currentSpec = {
					...spec
				};
				this.$refs.editSpecPopup.open();
			},
			closeEditSpecPopup() {
				this.$refs.editSpecPopup.close();
			},
			async saveSpec() {
				const res = await this.$myRuquest({
					url: '/index/plugin.users/saveSpec',
					method: 'POST',
					data: {
						...this.currentSpec
					}
				});
				if (res.data.code === 200) {
					uni.showToast({
						title: '保存成功',
						icon: 'success',
						duration: 2000
					});
					this.viewSpecs(this.selectedProduct);
					this.closeEditSpecPopup();
				} else {
					uni.showToast({
						title: res.data.message,
						icon: 'none',
						duration: 2000
					});
				}
			},

			// 保存商品信息
			async saveProduct() {
				const res = await this.$myRuquest({
					url: '/index/plugin.users/saveProduct',
					method: 'POST',
					data: {
						main_account_id: this.userInfo.user_id,
						shop_id: this.shopId,
						product_type2: this.items[this.current].value,
						...this.currentProduct,
					}
				});
				if (res.data.code === 200) {
					uni.showToast({
						title: '操作成功',
						icon: 'success',
						duration: 2000
					});
					this.fetchProducts();
					this.closePopup();
				} else {
					uni.showToast({
						title: res.data.message,
						icon: 'none',
						duration: 2000
					});
				}
			},

			async fetchProducts2() {
				const res = await this.$myRuquest({
					url: '/index/plugin.users/getProducts2',
					method: 'GET',
					data: {
						main_account_id: this.userInfo.user_id,
						shop_id: this.shopId
					}
				});
				if (res.data.code === 200) {
					this.stats = res.data.data.stats; // 从后端获取的统计数据
				} else {
					uni.showToast({
						title: res.data.message,
						duration: 2000,
						icon: 'none'
					});
				}
			},

			// 新增商品
			async addProduct() {
				console.log(this.newProduct);
				const res = await this.$myRuquest({
					url: '/index/plugin.users/saveProduct',
					method: 'POST',
					data: {
						shop_id: 0,
						product_type2: this.items[this.current].value,
						main_account_id: this.userInfo.user_id,
						...this.newProduct,
					}
				});
				if (res.data.code === 200) {
					uni.showToast({
						title: '操作成功',
						icon: 'success',
						duration: 2000
					});
					this.fetchProducts();
					this.closePopup();
				} else {
					uni.showToast({
						title: res.data.message,
						icon: 'none',
						duration: 2000
					});
				}
			},

			// 确认删除商品
			async confirmDelete(product) {
				const res = await this.$myRuquest({
					url: '/index/plugin.users/deleteProduct',
					method: 'POST',
					data: {
						product_id: product.id,
						main_account_id: this.mainAccountId
					}
				});
				if (res.data.code === 200) {
					uni.showToast({
						title: '删除成功',
						icon: 'success',
						duration: 2000
					});
					this.fetchProducts(); // 重新获取产品列表
				} else {
					uni.showToast({
						title: res.data.message,
						icon: 'none',
						duration: 2000
					});
				}
			},

			// 处理分页变化
			handlePageChange(e) {
				// 兼容 uni-pagination 的不同事件参数格式
				const currentPage = e.current || e.detail?.current || 1;
				this.pagination.currentPage = currentPage;
				this.fetchProducts(); // 加载新页面的数据
			},

			// 打开详情页
			openDetails() {
				console.log('子组件触发全局事件');
				// 使用全局事件总线
				this.$bus.$emit('switch-component', 'ProductDetails');
			},

			// 检查是否登录
			checkLoginStatus() {
				const token = uni.getStorageSync('token');
				if (token) {
					this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
					this.mainAccountId = this.userInfo.user_id;
					this.shopId = this.userInfo.shop_id;
				} else {
					this.userInfo = {};
					this.$router.push('/pages/login/login');
				}
			},

			// 保存调货信息
			async saveTransfer() {
				const res = await this.$myRuquest({
					url: '/index/plugin.users/saveStockTransfer',
					method: 'POST',
					data: {
						main_account_id: this.mainAccountId,
						...this.currentTransfer
					}
				});
				if (res.data.code === 200) {
					uni.showToast({
						title: '调货成功',
						icon: 'success',
						duration: 2000
					});
					this.fetchProducts();
					this.closePopup();
				} else {
					uni.showToast({
						title: res.data.message,
						icon: 'none',
						duration: 2000
					});
				}
			},
		},

		mounted() {
			this.checkLoginStatus();
			this.pagination = {
				currentPage: 1,
				pageSize: 10,
				totalRecords: 0,
				totalPages: 1
			};
			this.fetchProducts();
			this.fetchProducts2();
			this.fetchCategories(); // 获取分类列表
			this.fetchUnits(); // 获取单位列表
			this.fetchStores(); // 获取门店列表
		}
	};
</script>

<style scoped>
	.container {
		padding: 20px;
		background-color: #fff;
	}

	.popup-container {
		padding: 20px;
		background-color: #fff;
		border-radius: 8px;
	}

	.form-row {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.button-group {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}

	.modal-button {
		flex: 1;
		padding: 10px 15px;
		margin: 0 5px;
		background-color: #1abc9c;
		color: #fff;
		border: none;
		border-radius: 4px;
		cursor: pointer;
	}

	.modal-button.save:hover {
		background-color: #16a085;
	}

	.modal-button.cancel {
		background-color: #e74c3c;
	}

	.modal-button.cancel:hover {
		background-color: #c0392b;
	}

	.stat-cards {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-bottom: 20px;
	}

	.stat-card {
		flex: 1 1 30%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #f5f5f5;
		padding: 10px;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		border: 1px solid #ddd;
	}

	.card-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		text-align: center;
	}

	.divider {
		width: 2px;
		height: 40px;
		background-color: #dcdcdc;
	}

	.green {
		background-color: #2ecc71;
		color: #fff;
	}

	.blue {
		background-color: #3498db;
		color: #fff;
	}

	.orange {
		background-color: #f39c12;
		color: #fff;
	}

	.controls {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-bottom: 20px;
	}

	.search-bar {
		flex: 1;
		margin-right: 15px;
	}

	.control-buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.control-button {
		padding: 8px 12px;
		background-color: #3498db;
		color: #fff;
		border: none;
		border-radius: 4px;
		cursor: pointer;
	}

	.control-button:hover {
		background-color: #2980b9;
	}

	.uni-table {
		width: 100%;
		border-collapse: collapse;
	}

	.uni-th,
	.uni-td {
		padding: 10px;
		border: 1px solid #ddd;
	}

	.uni-th {
		background-color: #f9f9f9;
	}

	.member-modal {
		width: 80%;
		max-width: 500px;
		padding: 20px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	.form-row {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	label {
		width: 80px;
		color: #666;
		margin-right: 10px;
	}

	.input-field {
		flex: 1;
		padding: 8px;
		border: 1px solid #ddd;
		border-radius: 4px;
		outline: none;
	}

	.button-group {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}

	.modal-button {
		flex: 1;
		padding: 10px 15px;
		margin: 0 5px;
		background-color: #1abc9c;
		color: #fff;
		border: none;
		border-radius: 4px;
		cursor: pointer;
	}

	.modal-button.save:hover {
		background-color: #16a085;
	}

	.modal-button.cancel {
		background-color: #e74c3c;
	}

	.modal-button.cancel:hover {
		background-color: #c0392b;
	}
	.spec-modal{
		background-color: #fff;
		padding: 20px;
		border-radius: 5px;
	}
</style>